<template>
	<view ref="refresh">
		<view class="weui-pull-refresh" ref="scrollBox" :style="heightStyle">
			<view class="weui-pull-refreshing-box">
				<image src="../../../static/img/index/refresh_icon.png" class="img" mode=""></image>
				<view v-if="moveState < 2">{{ moveState === 1 ? '' : '释放立即刷新' }}</view>
				<view v-else>
					<i class="weui-loading" />
					刷新中…
				</view>
			</view>
		</view>
		<view class="weui-pull-present-box" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"><slot /></view>
	</view>
</template>
<script>
// 下拉刷新的触控范围，只在当前屏幕范围内吧，常见长列表的时候。意思是获取手机屏幕高度，意思是滑出了滚动范围后，不能再使用下拉刷新了吧。
export default {
	name: 'refresh',
	props: {
		flag: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			startY: '', //保存touch时的Y坐标
			moveDistance: 0, //保存向下滑动的距离
			moveState: 0, //开始滑动到结束后状态的变化 0:下拉即可刷新 1:释放即可刷新 2:加载中
			duration: 0 //动画持续时间，0就是没有动画
		};
	},
	// 组件生命周期要用这个？？？用onShow没反应
	created() {
	},
	computed: {
		heightStyle() {
			return {
				marginTop: `${this.moveDistance}px`,
				transition: `${this.duration}ms`
			};
		}
	},
	watch: {
		moveState(state) {
			//我们监听moveState的状态，
			//0意味着开始也意味着结束，这里是结束，并且只有动画生效我们才能 moveDistance 设为0，
			//为什么动画生效才行，因为动画生效意味着手指离开了屏幕，如果不懂去看touchEnd方法，这时
			//我们让距离变为0才会有动画效果。
			if (state === 0 && this.duration === 300) {
				this.moveDistance = 0;
			}
		},
		flag(newvalue) {
			console.log(newvalue, '值是');
		}
	},
	methods: {
		touchStart(e) {
			if (!this.flag) return;
			// console.log(e);
			this.duration = 0; // 关闭动画
			this.moveDistance = 0; // 滑动距离归0
			this.startY = e.touches[0].clientY; // 获得开始Y坐标
		},
		touchMove(e) {
			if (!this.flag) return;
			//这里是整个下拉刷新的核心
			// console.log(e, '滑动了');
			// let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
			//   //首先判断我们有没有滚动条，如果有，我们下拉刷新就不能启用。
			// if (scrollTop > 0) return

			let move = e.touches[0].clientY - this.startY;
			// console.log(move,'滑动距离是');
			//判断手指滑动的距离，只有为正数才代表用户下拉了。
			if (move > 0) {
				//阻止默认事件，在微信浏览器中尤为有用，至于为什么，你去试就知道了。
				e.preventDefault();
				//增加滑动阻力的感觉
				this.moveDistance = Math.pow(move, 0.8);
				if (this.moveDistance > 50) {
					//如果滑动距离大于50 那我就告诉你，释放即可刷新
					if (this.moveState === 1) return;
					this.moveState = 1;
				} else {
					//否则 恢复原样
					if (this.moveState === 0) return;
					this.moveState = 0;
				}
			}
		},
		touchEnd(e) {
			if (!this.flag) return;
			// 只要手指拿开，我都需要加上结束时的动画，这里为300ms
			this.duration = 300;
			if (this.moveDistance > 50) {
				//这里逻辑跟touchMove一样，但是需要真的加载数据了，那moveState变为2 所以加载动画在这出现
				this.moveState = 2;
				//因为还没加载完，我得让加载动画显示着，所以这里移动距离为50
				this.moveDistance = 100; //这里设置成100是盒子的高度
				this.$emit('refresh', () => {
					//这里就是成功后的回调了，如果该函数被调用，那就以为着加载数据完成，所以状态要回到0，当然需要在父组件调用。
					this.moveState = 0;
				});
			} else {
				//否则 给我老老实实恢复原样
				this.moveDistance = 0;
			}
		}
	}
};
</script>
<style scoped lang="less">
.weui-pull-refresh {
	width: 100%;
}
.weui-pull-present-box {
	width: 100%;
}
.weui-pull-refreshing-box {
	color: rgba(0, 0, 0, 0.38);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #f3f6f6;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	height: 200rpx;
	// 刚开始溢出屏幕
	margin-top: -200rpx;
	.img {
		width: 64rpx;
		height: 72rpx;
		margin-bottom: 30rpx;
	}
}
</style>
